<template>
  <div id="app">
    <div v-if="isShowEdit">
      <input ref="inp" v-model="editValue" type="text">
      <button>确认</button>
      
    </div>
    <div v-else>
        <span>{{ title }}
          <button @click="wn">编辑</button>
        </span>
      </div>
  </div>
</template>
<style>

</style>
<script>
export default {
  data(){
    return {
      title :'标题',
      editValue:'',
      isShowEdit:false
    }
  }
  ,
  methods:{
   wn(){
    this.isShowEdit = true
    //让输入框获取焦点 $nextTick 等dom 更新完立刻执行
   this.$nextTick(()=>{
     this.$refs.inp.focus()
   })
   /* 也可以使用计时器 
   setTimeout(()=>{
   this.$refs.inp.focus()
   })
   */
   }
  }
}
</script>